<template>
    <div class="subpage message-center-container">
        <ul class="message-center-box">
            <li @click="jumpView('personalMessage')">
                <div class="message-left">
                    <div class="message-icon-text">
                        <img src="../../../assets/img/msg_icon1.png" alt="">
                        <span class="message-tag" v-if="personalMsgNum > 0">{{personalMsgNum}}</span>
                    </div>
                    <span>个人消息</span>
                </div>
                <van-icon name="arrow" class="arrow-right" />
            </li>
            <li @click="jumpView('platformMessage')">
                <div class="message-left">
                    <div class="message-icon-text">
                        <img src="../../../assets/img/msg_icon2.png" alt="">
                        <span class="message-tag" v-if="platformMsgNum > 0">{{platformMsgNum}}</span>
                    </div>
                    <span>平台公告</span>
                </div>
                <van-icon name="arrow" class="arrow-right" />
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            personalMsgNum: 0,
            platformMsgNum: 0
        }
    },
    created() {
        this.getMsgNum()
    },
    methods: {
        jumpView(viewName) {
            this.$router.push({
                name: viewName
            })
        },
        getMsgNum() {
            this.$api.get('/api/imm/getMessageNum')
                .then((res) => {
                    this.personalMsgNum = res.data.personalNumber;
                    this.platformMsgNum = res.data.announcementNumber;
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .message-center-container {
        .message-center-box {
            li {
                width: 100%;
                margin-top: 10px;
                padding: 6px 17px 6px 13px;
                box-sizing: border-box;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .message-left {
                    display: flex;
                    align-items: center;
                    .message-icon-text {
                        position: relative;
                        img {
                            position: relative;
                            top: 3px;
                            width: 40px;
                            height: 40px;
                            object-fit: cover;
                        }
                        .message-tag {
                            position: absolute;
                            top: 0px;
                            left: 16px;
                            display: block;
                            min-width: 16px;
                            height: 16px;
                            line-height: 16px;
                            text-align: center;
                            font-size: 10px;
                            border-radius: 16px;
                            border: 1px solid #fff;
                            padding: 0 4px;
                            box-sizing: border-box;
                            background-color: #F6344C;
                            color: #fff;
                        }
                    }
                }
                span {
                    margin-left: 13px;
                    color: #344047;
                }
            }
        }
    }
</style>